<template>
	<!-- 对话框组件 -->
	<transition>
		<teleport to="body">
			<div
				v-show="dialogVisible"
				class="ly-dialog w-full h-full fixed top-0 left-0 z-50 flex flex-col items-center justify-center">
				<!-- Dialog 容器 -->
				<div
					:style="{ width: dialogWidth }"
					class="ly-dialog-container rounded-md bg-white dark:bg-gray-800 py-3 shadow-lg">
					<div
						class="ly-dialog-title px-3 text-lg font-bold text-gray-700 flex items-center justify-between">
						<span class="dark:text-gray-300">{{ title }}</span>
						<i
							@click="dialogVisible = false"
							class="bi bi-x-circle-fill cursor-pointer hover:text-blue-500"></i>
					</div>
					<!-- Dialog 内容 -->
					<div class="ly-dialog-body px-3 my-3">
						<slot></slot>
					</div>
					<div class="ly-dialog-footer flex items-center justify-end px-3">
						<slot name="footer"> </slot>
					</div>
				</div>
			</div>
		</teleport>
	</transition>
</template>

<script lang="ts">
import { useScreenStore } from '@/stores/screenStore';

export default defineComponent({
	name: 'LyDialog',
	props: {
		modelValue: {
			type: Boolean,
			required: true,
		},
		title: {
			type: String,
			default: '提示',
		},
	},
	emits: ['update:modelValue'],
	setup(props, { emit }) {
		const screenStore = useScreenStore();

		// 弹窗宽度
		const dialogWidth = computed(() => {
			if (screenStore.screenSize === 'xs' || screenStore.screenSize === 'sm') {
				return '90%';
			}
			return '500px';
		});

		const dialogVisible = ref<boolean>(props.modelValue);
		watch(dialogVisible, (val: boolean) => {
			emit('update:modelValue', val);
		});
		watch(
			() => props.modelValue,
			(val: boolean) => {
				dialogVisible.value = val;
			}
		);

		return {
			dialogWidth,
			dialogVisible,
		};
	},
});
</script>

<style lang="scss" scoped>
.ly-dialog {
	background-color: rgba(0, 0, 0, 0.3);

	overflow-y: scroll;

	&::-webkit-scrollbar {
		width: 5px;
	}

	&::-webkit-scrollbar-thumb {
		cursor: pointer;
		border-radius: 5px;
		background-color: rgba(0, 0, 255, 0.3);
	}
}
</style>
